npm install webpack webpack-cli webpack-dev-server --save-dev
            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3000/',
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: {
 // Define remotes here, e.g., 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'RemoteApp',
 filename: 'remoteEntry.js',
 exposes: {
 './Widget': './src/Widget',
 // Add other exposed modules here
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            import React from 'react';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

const RemoteWidget = React.lazy(() => import('RemoteApp/Widget'));

const App = () => {
 const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);

 useEffect(() => {
  setIsWidgetLoaded(true);
 }, []);

 return (
  

  
Host Application
  
This is the host application.
  {isWidgetLoaded ? (
   Loading Widget...
}>
   
   
  ) : (
   
Loading...
  )}
  

Forklaring:

• React.lazy(() => import('RemoteApp/Widget')): Dette importerer dynamisk Widget-modulet fra RemoteApp. Navnet RemoteApp svarer til navnet defineret i remotes-sektionen i hostens Webpack-konfiguration. Widget svarer til modulnavnet defineret i exposes-sektionen i remote-applikationens Webpack-konfiguration.
• React.Suspense: Dette bruges til at håndtere den asynkrone indlæsning af det eksterne modul. fallback-prop'en specificerer en komponent, der skal vises, mens modulet indlæses.

6. Kør applikationerne:

Start både host- og remote-applikationerne ved hjælp af npm start (eller din foretrukne metode). Sørg for, at remote-applikationen kører *før* host-applikationen.

Du skulle nu kunne se den eksterne widget blive gengivet inden i host-applikationen.

Avancerede Module Federation-teknikker

Ud over den grundlæggende opsætning tilbyder Module Federation flere avancerede teknikker til at bygge sofistikerede micro-frontend-arkitekturer.

1. Versionsstyring og Deling:

At håndtere delte afhængigheder effektivt er afgørende for at opretholde stabilitet og undgå konflikter. Module Federation giver mekanismer til at specificere versionsintervaller og singleton-instanser af delte moduler. Brug af shared-egenskaben i Webpack-konfigurationen giver dig mulighed for at kontrollere, hvordan delte moduler indlæses og administreres.

Eksempel:

            shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 lodash: { eager: true, version: '4.17.21' }
}

            

              
                Copy
              
            
          

• singleton: true: Sikrer, at kun én instans af modulet indlæses, hvilket forhindrer duplikering og reducerer bundle-størrelsen. Dette er især vigtigt for biblioteker som React og ReactDOM.
• requiredVersion: Specificerer det versionsinterval, som applikationen kræver. Webpack vil forsøge at indlæse en kompatibel version af modulet.
• eager: true: Indlæser modulet med det samme i stedet for dovent (lazily). Dette kan forbedre ydeevnen i nogle tilfælde, men kan også øge den oprindelige bundle-størrelse.

2. Dynamisk Module Federation:

I stedet for at hardcode URL'erne til remote-applikationer, kan du dynamisk indlæse dem fra en konfigurationsfil eller et API-endepunkt. Dette giver dig mulighed for at opdatere micro-frontend-arkitekturen uden at skulle gen-deploye host-applikationen.

Eksempel:

Opret en konfigurationsfil (f.eks. remote-config.json), der indeholder URL'erne til remote-applikationerne:

            {
 "RemoteApp": "http://localhost:3001/remoteEntry.js",
 "AnotherRemoteApp": "http://localhost:3002/remoteEntry.js"
}

            

              
                Copy
              
            
          

I host-applikationen hentes konfigurationsfilen, og remotes-objektet oprettes dynamisk:

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
const fs = require('fs');

module.exports = {
 // ... other configurations
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: new Promise(resolve => {
  fs.readFile(path.resolve(__dirname, 'remote-config.json'), (err, data) => {
  if (err) {
  console.error('Error reading remote-config.json:', err);
  resolve({});
  } else {
  try {
  const remotesConfig = JSON.parse(data.toString());
  resolve(remotesConfig);
  } catch (parseError) {
  console.error('Error parsing remote-config.json:', parseError);
  resolve({});
  }
  }
  });
 }),
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

Vigtig bemærkning: Overvej at bruge en mere robust metode til at hente den eksterne konfiguration i et produktionsmiljø, såsom et API-endepunkt eller en dedikeret konfigurationstjeneste. Eksemplet ovenfor bruger fs.readFile for enkelhedens skyld, men dette er generelt ikke egnet til produktionsdeployments.

3. Brugerdefinerede indlæsningsstrategier:

Module Federation giver dig mulighed for at tilpasse, hvordan eksterne moduler indlæses. Du kan implementere brugerdefinerede indlæsningsstrategier for at optimere ydeevnen eller håndtere specifikke scenarier, såsom at indlæse moduler fra et CDN eller bruge en service worker.

Webpack eksponerer hooks, der giver dig mulighed for at opsnappe og ændre modulindlæsningsprocessen. Dette giver finkornet kontrol over, hvordan eksterne moduler hentes og initialiseres.

4. Håndtering af CSS og styles:

Deling af CSS og styles mellem micro-frontends kan være kompliceret. Module Federation understøtter forskellige tilgange til håndtering af styles, herunder:

• CSS Modules: Brug CSS Modules til at indkapsle styles inden for hver micro-frontend, hvilket forhindrer konflikter og sikrer konsistens.
• Styled Components: Anvend styled components eller andre CSS-in-JS-biblioteker til at administrere styles i selve komponenterne.
• Globale Styles: Indlæs globale styles fra et delt bibliotek eller CDN. Vær forsigtig med denne tilgang, da den kan føre til konflikter, hvis styles ikke er korrekt namespaced.

Eksempel med CSS Modules:

Konfigurer Webpack til at bruge CSS Modules:

            module: {
 rules: [
 {
 test: /\.module\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 modules: {
 localIdentName: '[name]__[local]--[hash:base64:5]',
 },
 importLoaders: 1,
 },
 },
 'postcss-loader',
 ],
 },
 // ... other rules
],
}

            

              
                Copy
              
            
          

Importer CSS Modules i dine komponenter:

            import React from 'react';
import styles from './Widget.module.css';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

5. Kommunikation mellem Micro-Frontends:

Micro-frontends har ofte brug for at kommunikere med hinanden for at udveksle data eller udløse handlinger. Der er flere måder at opnå dette på:

• Delte Events: Brug en global event bus til at publicere og abonnere på events. Dette giver micro-frontends mulighed for at kommunikere asynkront uden direkte afhængigheder.
• Brugerdefinerede Events: Anvend brugerdefinerede DOM-events til kommunikation mellem micro-frontends på samme side.
• Delt State Management: Anvend et delt state management-bibliotek (f.eks. Redux, Zustand) til at centralisere state og lette datadeling.
• Direkte Modul-imports: Hvis micro-frontends er tæt koblet, kan du importere moduler direkte fra hinanden ved hjælp af Module Federation. Denne tilgang bør dog bruges sparsomt for at undgå at skabe afhængigheder, der underminerer fordelene ved micro-frontends.
• API'er og Services: Micro-frontends kan kommunikere med hinanden via API'er og services, hvilket giver løs kobling og større fleksibilitet. Dette er især nyttigt, når micro-frontends er deployeret på forskellige domæner или har forskellige sikkerhedskrav.

Fordele ved at bruge Module Federation til Micro-Frontends

• Forbedret Skalerbarhed: Micro-frontends kan skaleres uafhængigt, hvilket giver dig mulighed for at allokere ressourcer, hvor der er mest brug for dem.
• Øget Vedligeholdelsesvenlighed: Mindre kodebaser er lettere at forstå og vedligeholde, hvilket reducerer risikoen for fejl og forbedrer udviklerproduktiviteten.
• Hurtigere Deployeringscyklusser: Micro-frontends kan deployeres uafhængigt, hvilket giver mulighed for hurtigere iterationscyklusser og hurtigere udgivelse af nye funktioner.
• Teknologisk Mangfoldighed: Teams kan vælge de teknologier og frameworks, der passer bedst til deres behov, hvilket fremmer innovation og tillader brug af specialiserede færdigheder.
• Forbedret Team-autonomi: Hver micro-frontend ejes af et dedikeret team, hvilket fremmer ejerskab og ansvarlighed.
• Forenklet Onboarding: Nye udviklere kan hurtigt komme i gang med mindre, mere håndterbare kodebaser.

Udfordringer ved at bruge Module Federation

• Øget Kompleksitet: Micro-frontend-arkitekturer kan være mere komplekse end traditionelle monolitiske arkitekturer, hvilket kræver omhyggelig planlægning og koordinering.
• Håndtering af Delte Afhængigheder: Det kan være en udfordring at administrere delte afhængigheder, især når forskellige micro-frontends bruger forskellige versioner af det samme bibliotek.
• Kommunikations-overhead: Kommunikation mellem micro-frontends kan introducere overhead og ventetid.
• Integrationstest: Test af integrationen af micro-frontends kan være mere kompleks end test af en monolitisk applikation.
• Indledende Opsætnings-overhead: Konfiguration af Module Federation og opsætning af den indledende infrastruktur kan kræve en betydelig indsats.

Eksempler og anvendelsesområder fra den virkelige verden

Module Federation bruges af et voksende antal virksomheder til at bygge store, komplekse webapplikationer. Her er nogle eksempler og anvendelsesområder fra den virkelige verden:

• E-handelsplatforme: Store e-handelsplatforme bruger ofte micro-frontends til at administrere forskellige dele af hjemmesiden, såsom produktkataloget, indkøbskurven og betalingsprocessen. For eksempel kan en tysk forhandler bruge en separat micro-frontend til at vise produkter på tysk, mens en fransk forhandler bruger en anden micro-frontend til franske produkter, begge integreret i en enkelt host-applikation.
• Finansielle Institutioner: Banker og finansielle institutioner bruger micro-frontends til at bygge komplekse bankapplikationer, såsom netbankportaler, investeringsplatforme og handelssystemer. En global bank kan have teams i forskellige lande, der udvikler micro-frontends til forskellige regioner, hver skræddersyet til lokale regler og kundepræferencer.
• Content Management Systems (CMS): CMS-platforme kan bruge micro-frontends til at give brugerne mulighed for at tilpasse udseendet og funktionaliteten af deres hjemmesider. For eksempel kan et canadisk firma, der leverer CMS-tjenester, give brugerne mulighed for at tilføje eller fjerne forskellige micro-frontends (widgets) til deres hjemmeside for at tilpasse dens funktionalitet.
• Dashboards og Analyseplatforme: Micro-frontends er velegnede til at bygge dashboards og analyseplatforme, hvor forskellige teams kan bidrage med forskellige widgets og visualiseringer.
• Sundhedsapplikationer: Sundhedsudbydere bruger micro-frontends til at bygge patientportaler, elektroniske patientjournalsystemer (EPJ) og telemedicinske platforme.

Bedste praksis for implementering af Module Federation

For at sikre succes med din Module Federation-implementering, følg disse bedste praksisser:

• Planlæg omhyggeligt: Før du starter, skal du omhyggeligt planlægge din micro-frontend-arkitektur og definere klare grænser mellem de forskellige applikationer.
• Etabler klare kommunikationskanaler: Etabler klare kommunikationskanaler mellem de teams, der er ansvarlige for de forskellige micro-frontends.
• Automatiser deployering: Automatiser deployeringsprocessen for at sikre, at micro-frontends kan deployeres hurtigt og pålideligt.
• Overvåg ydeevne: Overvåg ydeevnen af din micro-frontend-arkitektur for at identificere og løse eventuelle flaskehalse.
• Implementer robust fejlhåndtering: Implementer robust fejlhåndtering for at forhindre kaskadefejl og sikre, at applikationen forbliver modstandsdygtig.
• Brug en konsistent kodestil: Håndhæv en konsistent kodestil på tværs af alle micro-frontends for at forbedre vedligeholdelsesvenligheden.
• Dokumenter alt: Dokumenter din arkitektur, afhængigheder og kommunikationsprotokoller for at sikre, at systemet er vel forstået og vedligeholdelsesvenligt.
• Overvej sikkerhedsmæssige konsekvenser: Overvej omhyggeligt de sikkerhedsmæssige konsekvenser af din micro-frontend-arkitektur og implementer passende sikkerhedsforanstaltninger. Sørg for overholdelse af globale databeskyttelsesregler som GDPR og CCPA.

Konklusion

JavaScript Module Federation med Webpack 5 giver en kraftfuld og fleksibel måde at bygge micro-frontend-arkitekturer på. Ved at opdele store applikationer i mindre, uafhængigt deployerbare enheder, kan du forbedre skalerbarhed, vedligeholdelsesvenlighed og team-autonomi. Selvom der er udfordringer forbundet med implementering af micro-frontends, opvejer fordelene ofte omkostningerne, især for komplekse webapplikationer. Ved at følge de bedste praksisser, der er beskrevet i denne guide, kan du med succes udnytte Module Federation til at bygge robuste og skalerbare micro-frontend-arkitekturer, der imødekommer behovene hos din organisation og brugere over hele verden.